<template>
  <div id="app">
      <Search v-if="isResearchShow"></Search>
    <NavPublic v-if="$store.state.isNavPublic"></NavPublic>
       <transition name="app" mode="out-in">
         <router-view></router-view>
      </transition>
  </div>
</template>

<script>
import Vue from 'vue'
import NavPublic from '@/components/NavPublic'
import { Loading } from 'vant'
import Search from '@/components/Search'
import { mapState } from 'vuex'
Vue.use(Loading)

export default {
  data () {
    return {

    }
  },
  components: {
    NavPublic,
    Search
  },
  computed: {
    ...mapState('publicShow', ['isShow', 'isResearchShow'])
  }
}
</script>

<style lang="scss" scoped>
  * {
    font-size: 16px;
  }
  .app-enter-active {
    animation: move .4s;
  }
  .app-leave-active {
    animation: move .4s reverse;
  }
  @keyframes move {
    0% {
      opacity: 0;
      transform: translateY(50px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
</style>
